<!-- 内容卡片 -->
<template>
  <div>
      <el-card shadow="hover" :body-style="	{ padding: '0px' }" class="group-con">
      <div class="face">
          
           <el-popover placement="left-start" width="300px" trigger="hover"  style="border-shadow:5px 5px 5px 5px #eee; margin:0; padding:0;">
              <author-card></author-card>
              <a href="#" slot="reference">
               <img src="@/images/1.png" alt="" width="50px" height="50px">
              </a>
            </el-popover>
      </div>
      <div class="main">
          <div class="author">
              <span>ice</span>
          </div>
          <div class="time">
              <span>1月20日</span>
              <span>发布于广州</span>
          </div>
          <div class="content">
              <span>今天天气真好啊</span>
              
          </div>
          <div class="tabs">
              <span>#推荐</span>
          </div>
          <div class="photo">
              <img src="@/images/3.png" alt="" height="150px ">
          </div>
          
      </div>
      <div class="caozuo">
         <div class="shoucan">
              <img src="@/assets/icon1/dianzan.svg" alt="" width="20px" v-if="dianzan" @click.prevent="dianzan=false">
              <img src="@/assets/icon1/dianzansucc.svg" alt="取消点赞" title="取消点赞" style="width:20px;" 
              v-else @click.prevent="dianzan=true">
                <span>点赞</span>
         </div>
         <span>|</span>
         <div class="like">
              <img src="@/assets/icon1/shoucan.svg" alt="" width="20px" v-if="shoucan" @click.prevent="shoucan=false">
              <img src="@/assets/icon1/shoucansucc.svg" alt="取消收藏" title="取消收藏" style="width:20px;" 
              v-else @click.prevent="shoucan=true">
              <span>收藏</span>
         </div>
         <span>|</span>
         <div class="argue">
              <img src="@/assets/icon1/argue.svg" alt="" width="20px" @click="argue=!argue">
             <span>评论</span>
         </div>
      </div>
    </el-card>
    
        <el-card shadow="hover" :body-style="	{ padding: '0px' }" class="argue-con" v-show="argue">
          <div class="myface">
          <img src="@/images/1.png" alt="" width="40px" height="40px">
      </div>
      <div class="ar-con">
        <el-input
  type="textarea"
  autosize
  placeholder="请输入内容"
  v-model="textarea">
</el-input>  
<el-button type="warning">发送</el-button>
      </div>
        
        </el-card>
  </div>
</template>

<script>
import AuthorCard from '@/components/photoInfo/authorCard.vue'
export default {
  data () {
    return {
        dianzan: true,
        shoucan: true,
        argue: false,
        textarea:'111'
    };
  },
    components:{
        AuthorCard
    },
  methods: {}
}

</script>
<style lang='scss' scoped>
.group-con{
    position: relative;
    height: 400px;
  
    .face{
        float: left;
        width:90px;
        height:400px;
        padding:20px 20px;
        img{
        box-shadow: 1px 1px 2px 2px #eee;
      }
        }
        .main{
            padding:20px 20px;
            .author{
                span{
                    font-size:20px;
                    letter-spacing: 2px;
                    font-weight: bold;
                }
            }
            .time{
                margin:10px 0;
                span{
                    font-size:14px;
                    letter-spacing: 1.5px;
                    color:#5e5e5e;
                    padding-right:20px;
                }
            }
            .content{
                margin:10px 0;
                         span{
                    font-size:16px;
                    letter-spacing: 1.5px;
                    padding-right:20px;
                }
            }
            .tabs{
                margin:30px 0 10px 0;
                        span{
                    font-size:16px;
                    letter-spacing: 1.5px;
                    color:#E6A23C;
                    padding-right:20px;
                }
            }
        }
        .caozuo{
            position: absolute;
            bottom: 0;
            height: 50px;
            width: 100%;
            display: flex;
            justify-content:space-evenly;
            align-items: center;
            border-top-width: 1px;
            border-top-style: solid;
            img {
        cursor: pointer;
        transition: all 0.6s;
      }
      img:hover {
        transform: scale(1.4);
      }
        }
}
.argue-con{
     position: relative;
    height: 120px;
    background:#C0C4CC;
    .myface{
           
        float: left;
        width:90px;
        height:100px;
        padding:20px 20px;
        img{
        box-shadow: 1px 1px 2px 2px #eee;
        }
    }
    .ar-con{
        margin-left:70px;
        padding:20px 20px;
        .el-button{
            float:right;
        }
 
    }
}
</style>